<script setup>
import { inject, reactive, ref, onMounted, computed } from 'vue'
import moment from 'moment'
import Message from './Message.vue'
import Editor from './Editor.vue'
import Comment from './Comment.vue'
import { useGet } from '@/utils/request'

const editorId = inject('editorId')

const props = defineProps({
    articleId: {
        type: String
    },
    parentId: {
        type: Number
    },
    outline: {
        type: Boolean,
        default: true
    },
    depth: {
        type: Number
    },
    editable: {
        type: Boolean,
        default: false
    }
})

// 加载评论列表
const page = reactive({
    page: 1,
    pageSize: 10,
    article_id: props.articleId,
    parent_id: props.parentId
})
const { data, refresh } = useGet('/comment', page)
const hasNextPage = ref(false)

const comment = reactive({
    parent_id: props.parentId,
    user_id: 1,
    article_id: props.articleId,
    comment: '',
    last_update_time: moment().format('YYYY-MM-DD HH:mm:ss'),
    create_time: moment().format('YYYY-MM-DD HH:mm:ss')
})
const create = () => {
    comment.user_id = 1
    comments.unshift(comment)
    // if (/^\s*$/g.test(comment.comment)) {
    //     return
    // }
    // post('v1/comment/insert/', comment).then(json => {
    //     comments.unshift(json.data)
    //     comment.comment = ''
    //     editorId.value = -1
    // })
}

const onNextPage = () => {
    page.page++
    onLoad()
}
const currentDepth = computed(() => props.depth + 1)

const like = item => {
    post('v1/comment/like/', { id: item.id, comment_like_id: item.comment_like_id }).then(json => {
        if (isNaN(json.data)) {
            item.like_count--
            item.comment_like_id = null
        } else {
            item.like_count++
            item.comment_like_id = json.data
        }
    })
}

const reply = item => {
    if (editorId.value != -1) {
        editorId.value = -1
    } else {
        editorId.value = item.id
    }
}
</script>

<template>
    <div class="comment" :class="outline && 'comment-outline'">
        <Editor
            v-if="editable || editorId == parentId"
            v-model="comment.comment"
            placeholder="请在此处留下您的评论"
            @submit="create" />

        <Message
            v-for="item in data"
            :key="item.id"
            :avatar="item.avatar_base64"
            :title="item.nick_name"
            :content="item.comment"
            :time="item.last_update_time"
            :label="comment.user_id == item.user_id"
            :children-count="item.children_count"
            :depth="currentDepth"
            :like="item.comment_like_id != null"
            :like-count="item.like_count"
            @like="like(item)"
            @reply="reply(item)">
            <Comment
                v-if="item.children_count != 0"
                :articleId="articleId"
                :parent-id="item.id"
                :depth="currentDepth" />
        </Message>
        <button class="comment-more" v-if="hasNextPage" @click="onNextPage">加载更多评论</button>
    </div>
</template>

<style scoped>
.comment {
    display: flex;
    flex-direction: column;
    justify-self: flex-end;
    position: relative;
    width: 50vw;
}

.comment-outline::before {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 100%;
    border-left: 2px dashed #e4e4e4;
    left: -40px;
    top: 0;
}

/* .comment-more {
    background-color: #bcbcbc;
    height: 2.5rem;
    color: white;
    border-radius: 2rem;
    margin-top: 3rem;
    font-size: 1rem;
} */

.comment-more {
    background-color: #dadada;
    color: white;
    border-radius: 4px;
    font-size: 13px;
    width: fit-content;
    padding: 0 0.5rem;
    margin-top: 0.5rem;
}

.comment-more:hover {
    background-color: #a9a9a9;
}
</style>
